import { defineComponent, PropType, reactive, ref } from 'vue';
import { IconCheck, IconArrowFall } from '@arco-design/web-vue/es/icon';

import { Popover } from "@arco-design/web-vue";
import {relationShip} from '@/constants/indexTree'
import IndexTreeList from '../../indexTreeGraph/components/IndexTreeList/index.vue'
import AddMetricsIcon from '@/assets/images/add_metrics_icon.svg';
import {nanoid} from  'nanoid'
import {removeAllChildDom} from '@/utils/util'
import './index.scss';
const ADropDown = defineComponent({
    name: 'ADropDown',
    components: { IndexTreeList },
    emits: ['addIndexItem', 'addSymbolItem'],
    props: {
        cardType: {
            type: String,
            default: 'indexCard'
        }
    },
    setup: (props, { slots, attrs, emit }) => {
        const currentIdnex = ref<any>()
        const indexActive = ref<Boolean>(false)
        const isCardType = props.cardType === 'indexCard'
        return () => {
            return (
                <div class="dropDown">
                    <div class="dropDown-group" v-show={!isCardType}>
                        <div class="dropDown-group-title">
                            
                            添加指标
                        </div>
                        <div class="dropDown-group-content">
                            <ul>
                                <Popover 
                                    position="rt" 
                                    trigger='click'
                                    content-style={{marginLeft: '12px', width: '210px', padding: '0'}}
                                    content-class='init-add-card-content'
                                    class="add-first-card"
                                    v-slots={{
                                        content: () => (
                                            <>
                                                <index-tree-list
                                                    groupId={undefined}
                                                    onHandleIndex={(v:any)=> {
                                                        emit('addIndexItem', v)
                                                    }}
                                                ></index-tree-list>
                                            </>
                                        )
                                    }}
                                >
                                    <li 
                                        class={{'indexActive': indexActive.value}}
                                        onClick={() => {
                                            indexActive.value = true
                                            currentIdnex.value = null
                                        }}
                                    >
                                        
                                        <span class="li-name col_blue">
                                            <img class="col_blue" src={AddMetricsIcon} alt="" />   
                                            <span class="ml-8">添加指标</span>
                                         </span>
                                    </li>
                                </Popover>
                            </ul>
                            
                        </div>
                    </div>
                    <div class="dropDown-group">
                        <div class="dropDown-group-title line-hegith30" v-show={!isCardType}>添加关系</div>
                        <div class="dropDown-group-content">
                            <ul>
                            {relationShip?.map((item:any, index:number) => (
                                <li 
                                    class={['relationShip_li', {relativeActive: currentIdnex.value === index}]}     
                                    onClick={() => {
                                        currentIdnex.value = index
                                        indexActive.value = false
                                        emit('addSymbolItem', item, isCardType)
                                    }}
                                >
                                    <div class="doption-l">
                                        <span class="symbol-icon">{item.symbol}</span>
                                        <span class="ml-8">{item.name}</span>
                                    </div>
                                    <div class="doption-r" v-show={currentIdnex.value === index}>
                                        <span><IconCheck /></span>
                                    </div>
                                </li>
                            ))}
                                
                            </ul>
                        </div>
                    </div>
                </div>
            )
        }
    }
})

export default ADropDown